import { createApp, nextTick } from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import request from './utils/request';
import storage from './utils/storage';
import api from './api';
import store from './store';
import Rocket from '../packages';

console.log('环境变量：', import.meta.env);

const app = createApp(App);

// directive自定义指令,用于显示角色对应权限按钮 v-has
app.directive('has', {
  beforeMount: (el, binding) => {
    // console.log(el, binding);
    // 获取按钮权限
    let actionList = storage.getItem('actionList');
    let value = binding.value;
    // 判断列表中是否有对应按钮权限标识
    let hasPermission = actionList.includes(value);
    if (!hasPermission) {
      el.style = 'display:none';
      // setTimeout(()=>{
      //   el.parentNode.removeChild(el);
      // })
      // // or
      // 等页面渲染
      nextTick(() => {
        el.parentNode.removeChild(el);
      });
    }
  },
});

// 全局变量$request
app.config.globalProperties.$request = request;
app.config.globalProperties.$api = api;
app.config.globalProperties.$storage = storage;
// .use(ElementPlus, { size: 'small' }) 设置ElementPlus全局尺寸
app.use(store).use(router).use(ElementPlus).use(Rocket).mount('#app');
